import React, { Component } from "react";
import { inject, observer } from "mobx-react";
 
@inject('todo')
@observer
class TodoExtra extends Component {
  render() {
		const { unfinishedTodoCount, filter, changeFilter } = this.props.todo;
    return (
      <footer className="footer">
				<span className="todo-count">
					<strong>{unfinishedTodoCount}</strong> item left
				</span>
				<ul className="filters">
					<li>
						<button className={filter === 'All' ? 'selected': ''} onClick={() => changeFilter('All')}>All</button>
					</li>
					<li>
						<button className={filter === 'Active' ? 'selected': ''} onClick={() => changeFilter('Active')}>Active</button>
					</li>
					<li>
						<button className={filter === 'Completed' ? 'selected': ''} onClick={() => changeFilter('Completed')}>Completed</button>
					</li>
				</ul>
				
				<button className="clear-completed">Clear completed</button>
			</footer>
    );
  }
}

export default TodoExtra;
